<template>
  <div class="patient-details">
    <TopBar>
      <div slot="left" class="el-icon-back">
        返回
      </div>
      <div slot="title" style="background:#fff;">
        <el-button type="primary" round>完善资料</el-button>
        <el-button type="primary" round>邮寄牙模</el-button>
        <el-button type="primary" round>确认制作</el-button>
        <el-button type="primary" round>确认收货</el-button>
        <el-button type="primary" round>隐形3D方案</el-button>
        <el-button type="primary" round>提交资料</el-button>
        <el-button type="primary" round>发起复诊</el-button>
      </div>
    </TopBar>
    <div class="details-body">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="item in navBarItem " :key="item.id+'_tabs'" :label="item.name" :name="item.id">
          <div class="details-body-panel">
            <component :is="item.id"></component>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import Overview from './overview';
import Case from './case';
import Report from './report';
import Order from './order';
import MailDentalCast from './mailDentalCast';
// 头部导航
import TopBar from '../TopBar';

export default {
  name: 'PatientDetails',
  components: {
    Overview,
    Case,
    Report,
    Order,
    MailDentalCast,
    TopBar
  },
  data() {
    return {
      navBarItem: [
        { name: '治疗概览', id: 'overview' },
        { name: '患者病历', id: 'case' },
        { name: '患者报告', id: 'report' },
        { name: '患者订单', id: 'order' },
        { name: '邮寄牙模', id: 'mailDentalCast' }
      ],
      activeName: 'overview'
    };
  },
  methods: {
    handleClick(index) {
    }
  }
};
</script>

<style lang="scss" scoped>
.patient-details{
  color: #666666;
  position: relative;
   .el-icon-back{
    font-size: 16px;
    font-weight: bold;
  }
  .details-body{
    .details-body-panel{
      padding: 0 20px;
    }
  }
}
.message{
  padding: 0px 20px 40px;
  position: relative;
  /*padding-bottom: 72px;*/
}
.btn{
  width: 88px;
  height: 28px;
  background: #508FCC;
  border-radius: 24px;
  color: #ffffff;
  font-size: 16px;
}
.el-form-item__label{
  color: red;
  font-weight: normal;
}
.el-form-item__content{
  color: #508FCC;
}
.bot-bar{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.active{
  font-size: 20px;
  font-weight: bold;
  color: #508FCC;
}
.samePatient{
  width: 520px;
  height: 331px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -260px;
  margin-top: -165px;
  display: none;
}
.prompt{
  background: rgba(0,0,0,0.3);
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 1002;
  display: none;
}
.upload{
  /*display: flex;*/
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -564px;
  margin-top: -250px;
  display: none;
}
.upload>div{
  margin: 0px 36px;
}
</style>
